<template>
  <view class="container">
    <view class="data-list">
      <view
        :id="'t' + item.id"
        class="item"
        v-for="(item, index) in dataList"
        :key="item.id"
        @click="onClickService(item, index)"
      >
        <view class="thumb" :style="{ backgroundImage: `url(${item.thumb})` }">
        </view>

        <view class="title">
          {{ item.title }}
        </view>
        <view class="desc"> 服务用时：{{ item.service_time }} </view>
        <view class="desc"> 服务评价：{{ item.comment }} </view>
      </view>
    </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
import Upload from "@/components/public/upload";
import { stringToJSON } from "@/utils";
export default {
  mixins: [viewModule],
  components: {
    Upload,
  },
  data() {
    return {
      imgBaseUrlV2,
      mixinViewOptions: {
        getURL: "/getServiceCase",
        isPage: true,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: true,
        pullDown: false,
      },
    };
  },
  methods: {
    fetchComplete(err, data = [], res = {}) {
      return data.map((i) => {
        let img_url = stringToJSON(i.img_url);
        let thumb = "";
        if (Array.isArray(img_url) && img_url.length) {
          thumb = img_url[0].url || img_url[0];
        }
        return {
          ...i,
          img_url,
          thumb,
        };
      });
    },
    onClickService(item, index) {
      this.$Router.push({
        path: "/pages/maintenance/serviceCase",
        query: {
          id: item.id,
        },
      });
    },
  },
  onLoad(q) {},
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/base';
@import '~@/common/stylus/mixins';

.container {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
}

.data-list {
  display: flex;
  flex-wrap: wrap;
  padding: 24rpx;

  >.item {
    flex: 0 0 340rpx;
    height: 420rpx;
    background: #3F5270;
    border-radius: 4rpx;
    margin-right: 22rpx;
    margin-bottom: 22rpx;

    &:nth-child(2n) {
      margin-right: 0;
    }

    >.thumb {
      width: 100%;
      height: 220rpx;
      background-size: cover;
      margin-bottom: 4rpx;
    }

    > .title, > .desc {
      padding: 0 20rpx;
    }

    >.title {
      font-size: 32rpx;
      color: color-white;
      line-height: 50rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: bold;
    }

    > .desc {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: color-white;
      line-height: 36rpx;
      no-wraps(2);
      margin-bottom: 10rpx;
      margin-top: 4rpx;
      text-align: justify;
    }
  }
}
</style>